{% extends "base.html" %}

{% block html.class%}showgrid{% endblock %}

{% block app.title %}Webdesign sugar for django - {% endblock %}

{% block app.headstyles %}
<link rel="stylesheet" href="{{ STATIC_URL }}libs/960/css/demo.css" />
{% endblock%}

{% block content.wrapper %}
<div class="container_12 border">
    <h2><a href="http://960.gs/">960 Grid System</a></h2>
    <h3>12 Column Grid</h3>
    <div class="grid_12">
        <p>940</p>
    </div>
    <!-- end .grid_12 -->

    <div class="clear"></div>
    <div class="grid_1">
        <p>60</p>
    </div>
    <!-- end .grid_1 -->

    <div class="grid_11">
        <p>860</p>
    </div>
    <!-- end .grid_11 -->

    <div class="clear"></div>
    <div class="grid_2">
        <p>140</p>
    </div>
    <!-- end .grid_2 -->

    <div class="grid_10">
        <p>780</p>
    </div>
    <!-- end .grid_10 -->

    <div class="clear"></div>
    <div class="grid_3">
        <p>220</p>
    </div>
    <!-- end .grid_3 -->

    <div class="grid_9">
        <p>700</p>
    </div>
    <!-- end .grid_9 -->

    <div class="clear"></div>
    <div class="grid_4">
        <p>300</p>
    </div>
    <!-- end .grid_4 -->

    <div class="grid_8">
        <p>620</p>
    </div>
    <!-- end .grid_8 -->

    <div class="clear"></div>
    <div class="grid_5">
        <p>380</p>
    </div>
    <!-- end .grid_5 -->

    <div class="grid_7">
        <p>540</p>
    </div>
    <!-- end .grid_7 -->

    <div class="clear"></div>
    <div class="grid_6">
        <p>460</p>
    </div>
    <!-- end .grid_6 -->

    <div class="grid_6">
        <p>460</p>
    </div>
    <!-- end .grid_6 -->

    <div class="clear"></div>
    <div class="grid_1 suffix_11">
        <p>60</p>
    </div>
    <!-- end .grid_1.suffix_11 -->

    <div class="clear"></div>
    <div class="grid_1 prefix_1 suffix_10">
        <p>60</p>
    </div>
    <!-- end .grid_1.prefix_1.suffix_10 -->

    <div class="clear"></div>
    <div class="grid_1 prefix_2 suffix_9">
        <p>60</p>
    </div>
    <!-- end .grid_1.prefix_2.suffix_9 -->

    <div class="clear"></div>
    <div class="grid_1 prefix_3 suffix_8">
        <p>60</p>
    </div>
    <!-- end .grid_1.prefix_3.suffix_8 -->

    <div class="clear"></div>
    <div class="grid_1 prefix_4 suffix_7">
        <p>60</p>
    </div>
    <!-- end .grid_1.prefix_4.suffix_7 -->

    <div class="clear"></div>
    <div class="grid_1 prefix_5 suffix_6">
        <p>60</p>
    </div>
    <!-- end .grid_1.prefix_5.suffix_6 -->
    <div class="clear"></div>
    <div class="grid_1 prefix_6 suffix_5">
        <p>60</p>
    </div>
    <!-- end .grid_1.prefix_6.suffix_5 -->

    <div class="clear"></div>
    <div class="grid_1 prefix_7 suffix_4">
        <p>60</p>
    </div>
    <!-- end .grid_1.prefix_7.suffix_4 -->

    <div class="clear"></div>
    <div class="grid_1 prefix_8 suffix_3">
        <p>60</p>
    </div>
    <!-- end .grid_1.prefix_8.suffix_3 -->

    <div class="clear"></div>
    <div class="grid_1 prefix_9 suffix_2">
        <p>60</p>
    </div>
    <!-- end .grid_1.prefix_9.suffix_2 -->

    <div class="clear"></div>
    <div class="grid_1 prefix_10 suffix_1">
        <p>60</p>
    </div>
    <!-- end .grid_1.prefix_10.suffix_1 -->

    <div class="clear"></div>
    <div class="grid_1 prefix_11">
        <p>60</p>
    </div>
    <!-- end .grid_1.prefix_11 -->

    <div class="clear"></div>
    <div class="grid_6 push_6">
        <div class="grid_1 alpha">
            <p>60</p>
        </div>
        <!-- end .grid_1.alpha -->

        <div class="grid_5 omega">
            <p>380</p>
        </div>
        <!-- end .grid_5.omega -->

        <div class="clear"></div>
        <div class="grid_3 alpha">
            <p>220</p>
        </div>
        <!-- end .grid_3.alpha -->

        <div class="grid_3 omega">
            <p>220</p>
        </div>
        <!-- end .grid_3.omega -->
    </div>
    <!-- end .grid_6.push_6 -->

    <div class="grid_6 pull_6">
        <div class="grid_3 alpha">
            <p>220</p>
        </div>
        <!-- end .grid_3.alpha -->

        <div class="grid_3 omega">
            <p>220</p>
        </div>
        <!-- end .grid_3.omega -->

        <div class="clear"></div>
        <div class="grid_1 alpha">
            <p>60</p>
        </div>
        <!-- end .grid_1.alpha -->

        <div class="grid_5 omega">
            <p>380</p>
        </div>
        <!-- end .grid_5.omega -->
    </div>
    <!-- end .grid_6.pull_6 -->
</div>
<!-- end .container_12 -->

<div class="container_16 border">
    <h2>16 Column Grid</h2>
    <div class="grid_16">
        <p>940</p>
    </div>
    <!-- end .grid_16 -->

    <div class="clear"></div>
    <div class="grid_1">
        <p>40</p>
    </div>
    <!-- end .grid_1 -->

    <div class="grid_15">
        <p>880</p>
    </div>
    <!-- end .grid_15 -->

    <div class="clear"></div>
    <div class="grid_2">
        <p>100</p>
    </div>
    <!-- end .grid_2 -->

    <div class="grid_14">
        <p>820</p>
    </div>
    <!-- end .grid_14 -->
  
    <div class="clear"></div>
    <div class="grid_3">
        <p>160</p>
    </div>
    <!-- end .grid_3 -->

    <div class="grid_13">
        <p>760</p>
    </div>
    <!-- end .grid_13 -->

    <div class="clear"></div>
    <div class="grid_4">
        <p>220</p>
    </div>
    <!-- end .grid_4 -->

    <div class="grid_12">
        <p>700</p>
    </div>
    <!-- end .grid_12 -->

    <div class="clear"></div>
    <div class="grid_5">
        <p>280</p>
    </div>
    <!-- end .grid_5 -->

    <div class="grid_11">
        <p>640</p>
    </div>
    <!-- end .grid_11 -->

    <div class="clear"></div>
    <div class="grid_6">
        <p>340</p>
    </div>
    <!-- end .grid_6 -->

    <div class="grid_10">
        <p>580</p>
    </div>
    <!-- end .grid_10 -->

    <div class="clear"></div>
    <div class="grid_7">
        <p>400</p>
    </div>
    <!-- end .grid_7 -->

    <div class="grid_9">
        <p>520</p>
    </div>
    <!-- end .grid_9 -->

    <div class="clear"></div>
    <div class="grid_8">
        <p>460</p>
    </div>
    <!-- end .grid_8 -->

    <div class="grid_8">
        <p>460</p>
    </div>
    <!-- end .grid_8 -->

    <div class="clear"></div>
    <div class="grid_1 suffix_15">
        <p>40</p>
    </div>
    <!-- end .grid_1.suffix_15 -->

    <div class="clear"></div>
    <div class="grid_1 prefix_1 suffix_14">
        <p>40</p>
    </div>
    <!-- end .grid_1.prefix_1.suffix_14 -->
    
    <div class="clear"></div>
    <div class="grid_1 prefix_2 suffix_13">
        <p>40</p>
    </div>
    <!-- end .grid_1.prefix_2.suffix_13 -->
    
    <div class="clear"></div>
    <div class="grid_1 prefix_3 suffix_12">
        <p>40</p>
    </div>
    <!-- end .grid_1.prefix_3.suffix_12 -->
    
    <div class="clear"></div>
    <div class="grid_1 prefix_4 suffix_11">
        <p>40</p>
    </div>
    <!-- end .grid_1.prefix_4.suffix_11 -->
    
    <div class="clear"></div>
    <div class="grid_1 prefix_5 suffix_10">
        <p>40</p>
    </div>
    <!-- end .grid_1.prefix_5.suffix_10 -->
    
    <div class="clear"></div>
    <div class="grid_1 prefix_6 suffix_9">
        <p>40</p>
    </div>
    <!-- end .grid_1.prefix_6.suffix_9 -->
    
    <div class="clear"></div>
    <div class="grid_1 prefix_7 suffix_8">
        <p>40</p>
    </div>
    <!-- end .grid_1.prefix_7.suffix_8 -->
    
    <div class="clear"></div>
    <div class="grid_1 prefix_8 suffix_7">
        <p>40</p>
    </div>
    <!-- end .grid_1.prefix_8.suffix_7 -->
    
    <div class="clear"></div>
    <div class="grid_1 prefix_9 suffix_6">
        <p>40</p>
    </div>
    <!-- end .grid_1.prefix_9.suffix_6 -->
    
    <div class="clear"></div>
    <div class="grid_1 prefix_10 suffix_5">
        <p>40</p>
    </div>
    <!-- end .grid_1.prefix_10.suffix_5 -->
    
    <div class="clear"></div>
    <div class="grid_1 prefix_11 suffix_4">
        <p>40</p>
    </div>
    <!-- end .grid_1.prefix_11.suffix_4 -->
    
    <div class="clear"></div>
    <div class="grid_1 prefix_12 suffix_3">
        <p>40</p>
    </div>
    <!-- end .grid_1.prefix_12.suffix_3 -->

    <div class="clear"></div>
    <div class="grid_1 prefix_13 suffix_2">
        <p>40</p>
    </div>
    <!-- end .grid_1.prefix_13.suffix_2 -->
    
    <div class="clear"></div>
    <div class="grid_1 prefix_14 suffix_1">
        <p>40</p>
    </div>
    <!-- end .grid_1.prefix_14.suffix_1 -->
    
    <div class="clear"></div>
    <div class="grid_1 prefix_15">
        <p>40</p>
    </div>
    <!-- end .grid_1.prefix_15 -->
    
    <div class="clear"></div>
    <div class="grid_8 push_8">
        <div class="grid_1 alpha">
            <p>40</p>
        </div>
        <!-- end .grid_1.alpha -->

        <div class="grid_7 omega">
            <p>400</p>
        </div>
        <!-- end .grid_7.omega -->

        <div class="clear"></div>
        <div class="grid_4 alpha">
            <p>220</p>
        </div>
        <!-- end .grid_4.alpha -->

        <div class="grid_4 omega">
            <p>220</p>
        </div>
        <!-- end .grid_4.omega -->
    </div>
    <!-- end .grid_8.push_8 -->

    <div class="grid_8 pull_8">
        <div class="grid_4 alpha">
          <p>220</p>
        </div>
        <!-- end .grid_4.alpha -->

        <div class="grid_4 omega">
          <p>220</p>
        </div>
        <!-- end .grid_4.omega -->

        <div class="clear"></div>
        <div class="grid_1 alpha">
            <p>40</p>
        </div>
        <!-- end .grid_1.alpha -->

        <div class="grid_7 omega">
            <p>400</p>
        </div>
        <!-- end .grid_7.omega -->
    </div>
    <!-- end .grid_8.pull_8 -->
</div>
<!-- end .container_16 -->
{% endblock %}
